<template>
  <div class="flex flex-row overflow-hidden h-[10rem] lg:h-[9rem]">
    <div class="w-[7rem] h-full relative shrink-0">
      <div class="h-full w-full overflow-hidden">
        <img
          :src="course.img"
          class="h-full w-full object-cover rounded-l-md"
          alt=""
        />
      </div>
    </div>
    <div class="py-2 px-3 flex flex-col flex-grow justify-between">
      <h2 class="text-base font-medium line-clamp-1 mb-1">
        {{ course.title }}
      </h2>
      <p class="text-xs text-gray-500 line-clamp-3">{{ course.desc }}</p>
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  course: {
    type: Object,
    default: () => {
      return {
        img: "",
        title: "",
        desc: "",
      };
    },
  },
});
</script>
